<template>
  <div class="boxx">
    <div class="center">
      <div class="card">
        <img class="pic11" :src="picture" />
        <div class="row11">
          <h2>{{ name }}</h2>
          <p>导演：{{ director }}</p>
          <p>类型：{{ type }}</p>
          <p>年份：{{ filmYear }}</p>
          <p>国家/地区：{{ country }}</p>
          <p>简介：{{ brief }}</p>
        </div>
        <!-- <img src="write.png" class="png1" /> -->
        <div class="ooo">
          <div class="head"></div>
          <div class="right">
            <div class="rightzz">🎊 豆瓣评分：{{ score }}</div>
            <div class="rightzzz">🎐 综合排名：top{{ rank }}</div>
          </div>
        </div>
      </div>

      <div class="com">
        <div class="tableLine">
          <span class="midText">« 影评 »</span>
        </div>

        <el-row>
          <el-col v-for="(fid, index) in dataset" :key="index" :offset="1.1">
            <img :src="fid.imag" class="toux" />
            <div class="user">{{ fid.userName }}</div>
            <div class="liken">❤ {{ fid.likeNumber }}</div>
            <div class="ctime">{{ fid.commentDate }}</div>
            <div class="comm">{{ fid.comment }}</div>
            <div class="line"></div>
            <!-- <div>{{fid.comment}}</div> -->
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      dataset: [],
      rank: this.$route.query.rank,
      name: this.$route.query.name,
      score: this.$route.query.score,
      director: this.$route.query.director,
      type: this.$route.query.type,
      brief: this.$route.query.brief,
      picture: this.$route.query.picture,
      filmYear: this.$route.query.filmYear,
      country: this.$route.query.country,
    };
  },
  created() {
    this.convert();
  },
  methods: {
    convert: function () {
      axios.get("/top250film/v1/comments/" + this.rank).then((res) => {
        this.dataset = res.data;
        console.log(res.data);
      });
    },
  },
};
</script>

<style scoped lang="scss">
/* 横线 */
.line {
  float: right;
  width: 91%;
  height: 1px;
  margin-top: 0.5em;
  background: #ecebeb;
  position: relative;
  text-align: center;
}
.tableLine {
  margin-top: 30px;
  position: relative;
  margin: 20 auto;
  width: 1000px;
  height: 1px;
  background-color: #f5f2f2;
  text-align: center;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);
}
.midText {
  position: absolute;
  left: 50%;
  padding: 20px 15px 20px;
  transform: translateX(-50%) translateY(-50%);
}
.png1 {
  width: 150px;
  height: 170px;
  float: right;
  margin-top: -20px;
}
// .head {
//   position: relative;
//   margin-left: 860px;
//   background-color: rgb(226, 226, 226);
//   margin-top: 0px;
//   width: 30px;
//   height: 320px;
//   z-index: 0;
// }
.rightzz {
  margin-top: 46px;
  margin-left: 10px;
}
.rightzzz {
  margin-left: 10px;
  margin-top: 6px;
}
.right {
  font-size: 19px;
  color: rgb(249, 250, 252);
  float: right;
  background-color: #577dee;
  margin-top: 80px;
  width: 200px;
  height: 150px;
    box-shadow: 0 10px 16px -8px rgba(0, 0, 0, 0.4);
}
.toux {
  border-radius: 50%;
  padding: 20px 40px;
}
.user {
  margin-top: -70px;
  margin-left: 94px;
  font-size: 14px;
  font-weight: 600;
}
.liken {
  display: flex;
  align-items: center;
  //text-align: center;
  //padding: 0 16px 0 20px;
  margin-left: auto;
  flex-shrink: 0;
  width: 100%;
  max-width: 200px;
}
.ctime {
  margin-top: -20px;
  position: absolute;
  float: left;
  left: 94px;
  font-size: 10px;
  color: rgb(199, 197, 197);
}
.comm {
  margin-top: 10px;
  margin-left: 90px;
  width: 860px;
  float: left;
  left: 30px;
  font-size: 12px;
}

.boxx {
  background-color: rgb(230, 229, 229);
  overflow: auto;
  width: 100%;
}
.center {
  font-family: Abel, Arial, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  width: 100%;
  padding: 20px 40px;
  background-color: rgba(16 18 27 / 10%);
  /* background: url("/public/bg001.jpg"); */
  background-size: cover;

  .card {
    width: 98%;
    height: 68%;
    background: #fff linear-gradient(#f8f8f8, #fff);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    overflow: auto;
    position: relative;
    margin: 1.5rem;
    margin-top: 0px;

    .pic11 {
      width: 250px;
      height: 320px;
      float: left;
    }
    .row11 {
      align-items: center;
      margin-top: 30px;
      position: absolute;
      margin-left: 300px;
    }
  }

  .com {
    width: 98%;
    height: 100%;
    background: #fff linear-gradient(#f8f8f8, #fff);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    overflow-y: auto;
    position: relative;
    margin: 1.5rem;
    margin-top: 2px;
  }
}
</style>
// 去除滚动条
<style lang="scss">
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>

